<template>
  <div class="cashier-settings-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>收银台设置</h3>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <div class="tab-content">
            <el-form :model="basicSettings" :rules="basicRules" ref="basicFormRef" label-width="150px">
              <el-divider content-position="left">收银台信息</el-divider>
              
              <el-form-item label="收银台名称" prop="cashierName">
                <el-input v-model="basicSettings.cashierName" placeholder="请输入收银台名称" />
              </el-form-item>
              
              <el-form-item label="收银台编号" prop="cashierCode">
                <el-input v-model="basicSettings.cashierCode" placeholder="请输入收银台编号" />
              </el-form-item>
              
              <el-form-item label="默认收银员" prop="defaultCashier">
                <el-select v-model="basicSettings.defaultCashier" placeholder="请选择默认收银员" style="width: 100%">
                  <el-option label="收银员001" value="收银员001" />
                  <el-option label="收银员002" value="收银员002" />
                  <el-option label="收银员003" value="收银员003" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="收银台位置" prop="location">
                <el-input v-model="basicSettings.location" placeholder="请输入收银台位置" />
              </el-form-item>
              
              <el-divider content-position="left">显示设置</el-divider>
              
              <el-form-item label="商品显示数量" prop="productDisplayCount">
                <el-input-number
                  v-model="basicSettings.productDisplayCount"
                  :min="6"
                  :max="24"
                  style="width: 200px"
                />
                <span class="form-tip">每页显示的商品数量</span>
              </el-form-item>
              
              <el-form-item label="商品图片大小" prop="productImageSize">
                <el-radio-group v-model="basicSettings.productImageSize">
                  <el-radio label="small">小图</el-radio>
                  <el-radio label="medium">中图</el-radio>
                  <el-radio label="large">大图</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="显示商品库存" prop="showStock">
                <el-switch v-model="basicSettings.showStock" />
                <span class="form-tip">是否在商品卡片上显示库存信息</span>
              </el-form-item>
              
              <el-form-item label="显示商品价格" prop="showPrice">
                <el-switch v-model="basicSettings.showPrice" />
                <span class="form-tip">是否在商品卡片上显示价格信息</span>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveBasicSettings" :loading="saveLoading">
                  保存设置
                </el-button>
                <el-button @click="resetBasicSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 快捷键设置 -->
        <el-tab-pane label="快捷键设置" name="shortcuts">
          <div class="tab-content">
            <el-form :model="shortcutSettings" label-width="150px">
              <el-divider content-position="left">功能快捷键</el-divider>
              
              <el-form-item label="扫码快捷键">
                <el-input v-model="shortcutSettings.scan" readonly>
                  <template #prepend>F1</template>
                </el-input>
                <span class="form-tip">快速执行扫码功能</span>
              </el-form-item>
              
              <el-form-item label="搜索快捷键">
                <el-input v-model="shortcutSettings.search" readonly>
                  <template #prepend>F2</template>
                </el-input>
                <span class="form-tip">快速打开商品搜索</span>
              </el-form-item>
              
              <el-form-item label="清空快捷键">
                <el-input v-model="shortcutSettings.clear" readonly>
                  <template #prepend>F3</template>
                </el-input>
                <span class="form-tip">清空扫码输入框</span>
              </el-form-item>
              
              <el-form-item label="支付快捷键">
                <el-input v-model="shortcutSettings.payment" readonly>
                  <template #prepend>F4</template>
                </el-input>
                <span class="form-tip">快速打开支付界面</span>
              </el-form-item>
              
              <el-form-item label="清空购物车">
                <el-input v-model="shortcutSettings.clearCart" readonly>
                  <template #prepend>F5</template>
                </el-input>
                <span class="form-tip">清空购物车</span>
              </el-form-item>
              
              <el-form-item label="打印小票">
                <el-input v-model="shortcutSettings.print" readonly>
                  <template #prepend>F6</template>
                </el-input>
                <span class="form-tip">打印当前小票</span>
              </el-form-item>
              
              <el-divider content-position="left">自定义快捷键</el-divider>
              
              <div class="custom-shortcuts">
                <div v-for="(shortcut, index) in customShortcuts" :key="index" class="shortcut-item">
                  <el-form-item :label="shortcut.name">
                    <el-input v-model="shortcut.key" readonly>
                      <template #prepend>{{ shortcut.key }}</template>
                    </el-input>
                    <el-button type="danger" size="small" @click="removeShortcut(index)">删除</el-button>
                  </el-form-item>
                </div>
              </div>
              
              <el-form-item>
                <el-button type="primary" @click="addCustomShortcut">添加自定义快捷键</el-button>
                <el-button @click="resetShortcuts">重置快捷键</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 音效设置 -->
        <el-tab-pane label="音效设置" name="sound">
          <div class="tab-content">
            <el-form :model="soundSettings" label-width="150px">
              <el-divider content-position="left">音效开关</el-divider>
              
              <el-form-item label="启用音效" prop="enabled">
                <el-switch v-model="soundSettings.enabled" />
                <span class="form-tip">是否启用收银台音效</span>
              </el-form-item>
              
              <el-form-item label="扫码成功音效" prop="scanSuccess">
                <el-switch v-model="soundSettings.scanSuccess" :disabled="!soundSettings.enabled" />
                <el-button type="primary" size="small" @click="playSound('success')" :disabled="!soundSettings.enabled">
                  试听
                </el-button>
              </el-form-item>
              
              <el-form-item label="扫码失败音效" prop="scanError">
                <el-switch v-model="soundSettings.scanError" :disabled="!soundSettings.enabled" />
                <el-button type="primary" size="small" @click="playSound('error')" :disabled="!soundSettings.enabled">
                  试听
                </el-button>
              </el-form-item>
              
              <el-form-item label="支付成功音效" prop="paymentSuccess">
                <el-switch v-model="soundSettings.paymentSuccess" :disabled="!soundSettings.enabled" />
                <el-button type="primary" size="small" @click="playSound('payment')" :disabled="!soundSettings.enabled">
                  试听
                </el-button>
              </el-form-item>
              
              <el-form-item label="添加商品音效" prop="addProduct">
                <el-switch v-model="soundSettings.addProduct" :disabled="!soundSettings.enabled" />
                <el-button type="primary" size="small" @click="playSound('add')" :disabled="!soundSettings.enabled">
                  试听
                </el-button>
              </el-form-item>
              
              <el-divider content-position="left">音量设置</el-divider>
              
              <el-form-item label="音量大小" prop="volume">
                <el-slider
                  v-model="soundSettings.volume"
                  :min="0"
                  :max="100"
                  :disabled="!soundSettings.enabled"
                  style="width: 300px"
                />
                <span class="form-tip">{{ soundSettings.volume }}%</span>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveSoundSettings" :loading="saveLoading">
                  保存设置
                </el-button>
                <el-button @click="resetSoundSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 界面设置 -->
        <el-tab-pane label="界面设置" name="interface">
          <div class="tab-content">
            <el-form :model="interfaceSettings" label-width="150px">
              <el-divider content-position="left">主题设置</el-divider>
              
              <el-form-item label="主题模式" prop="theme">
                <el-radio-group v-model="interfaceSettings.theme">
                  <el-radio label="light">浅色模式</el-radio>
                  <el-radio label="dark">深色模式</el-radio>
                  <el-radio label="auto">跟随系统</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="主题色" prop="primaryColor">
                <el-color-picker v-model="interfaceSettings.primaryColor" />
                <span class="form-tip">选择收银台主题色</span>
              </el-form-item>
              
              <el-divider content-position="left">布局设置</el-divider>
              
              <el-form-item label="商品网格列数" prop="gridColumns">
                <el-input-number
                  v-model="interfaceSettings.gridColumns"
                  :min="2"
                  :max="6"
                  style="width: 200px"
                />
                <span class="form-tip">商品网格显示的列数</span>
              </el-form-item>
              
              <el-form-item label="购物车位置" prop="cartPosition">
                <el-radio-group v-model="interfaceSettings.cartPosition">
                  <el-radio label="right">右侧</el-radio>
                  <el-radio label="bottom">底部</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="显示动画" prop="showAnimations">
                <el-switch v-model="interfaceSettings.showAnimations" />
                <span class="form-tip">是否显示交互动画效果</span>
              </el-form-item>
              
              <el-form-item label="自动聚焦扫码框" prop="autoFocus">
                <el-switch v-model="interfaceSettings.autoFocus" />
                <span class="form-tip">页面加载时自动聚焦到扫码输入框</span>
              </el-form-item>
              
              <el-divider content-position="left">字体设置</el-divider>
              
              <el-form-item label="字体大小" prop="fontSize">
                <el-select v-model="interfaceSettings.fontSize" style="width: 200px">
                  <el-option label="小" value="small" />
                  <el-option label="中" value="medium" />
                  <el-option label="大" value="large" />
                  <el-option label="超大" value="xlarge" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="字体粗细" prop="fontWeight">
                <el-select v-model="interfaceSettings.fontWeight" style="width: 200px">
                  <el-option label="细" value="300" />
                  <el-option label="正常" value="400" />
                  <el-option label="粗" value="600" />
                  <el-option label="很粗" value="700" />
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveInterfaceSettings" :loading="saveLoading">
                  保存设置
                </el-button>
                <el-button @click="resetInterfaceSettings">重置</el-button>
                <el-button type="success" @click="previewSettings">预览效果</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 打印设置 -->
        <el-tab-pane label="打印设置" name="print">
          <div class="tab-content">
            <el-form :model="printSettings" :rules="printRules" ref="printFormRef" label-width="150px">
              <el-divider content-position="left">打印机设置</el-divider>
              
              <el-form-item label="默认打印机" prop="defaultPrinter">
                <el-select v-model="printSettings.defaultPrinter" placeholder="请选择默认打印机" style="width: 100%">
                  <el-option label="热敏打印机" value="thermal" />
                  <el-option label="针式打印机" value="dot" />
                  <el-option label="激光打印机" value="laser" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="纸张宽度" prop="paperWidth">
                <el-input-number
                  v-model="printSettings.paperWidth"
                  :min="58"
                  :max="80"
                  style="width: 200px"
                />
                <span class="form-tip">毫米 (mm)</span>
              </el-form-item>
              
              <el-form-item label="打印密度" prop="printDensity">
                <el-slider
                  v-model="printSettings.printDensity"
                  :min="1"
                  :max="10"
                  style="width: 300px"
                />
                <span class="form-tip">{{ printSettings.printDensity }}/10</span>
              </el-form-item>
              
              <el-divider content-position="left">小票设置</el-divider>
              
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="printSettings.companyName" placeholder="请输入公司名称" />
              </el-form-item>
              
              <el-form-item label="公司地址" prop="companyAddress">
                <el-input v-model="printSettings.companyAddress" placeholder="请输入公司地址" />
              </el-form-item>
              
              <el-form-item label="联系电话" prop="companyPhone">
                <el-input v-model="printSettings.companyPhone" placeholder="请输入联系电话" />
              </el-form-item>
              
              <el-form-item label="显示二维码" prop="showQRCode">
                <el-switch v-model="printSettings.showQRCode" />
                <span class="form-tip">是否在小票上显示二维码</span>
              </el-form-item>
              
              <el-form-item label="显示收银员" prop="showCashier">
                <el-switch v-model="printSettings.showCashier" />
                <span class="form-tip">是否在小票上显示收银员信息</span>
              </el-form-item>
              
              <el-form-item label="显示时间" prop="showTime">
                <el-switch v-model="printSettings.showTime" />
                <span class="form-tip">是否在小票上显示收银时间</span>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="savePrintSettings" :loading="saveLoading">
                  保存设置
                </el-button>
                <el-button @click="resetPrintSettings">重置</el-button>
                <el-button type="success" @click="testPrint">测试打印</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const activeTab = ref('basic')
const saveLoading = ref(false)
const basicFormRef = ref()
const printFormRef = ref()

// 基本设置
const basicSettings = reactive({
  cashierName: '收银台001',
  cashierCode: 'C001',
  defaultCashier: '收银员001',
  location: '一楼大厅',
  productDisplayCount: 12,
  productImageSize: 'medium',
  showStock: true,
  showPrice: true
})

// 快捷键设置
const shortcutSettings = reactive({
  scan: '扫码',
  search: '搜索商品',
  clear: '清空输入',
  payment: '立即支付',
  clearCart: '清空购物车',
  print: '打印小票'
})

const customShortcuts = ref([
  { name: '快速折扣', key: 'Ctrl+D' },
  { name: '会员查询', key: 'Ctrl+M' }
])

// 音效设置
const soundSettings = reactive({
  enabled: true,
  scanSuccess: true,
  scanError: true,
  paymentSuccess: true,
  addProduct: true,
  volume: 50
})

// 界面设置
const interfaceSettings = reactive({
  theme: 'light',
  primaryColor: '#409EFF',
  gridColumns: 4,
  cartPosition: 'right',
  showAnimations: true,
  autoFocus: true,
  fontSize: 'medium',
  fontWeight: '400'
})

// 打印设置
const printSettings = reactive({
  defaultPrinter: 'thermal',
  paperWidth: 58,
  printDensity: 5,
  companyName: '大型ERP超市',
  companyAddress: '北京市朝阳区科技园区',
  companyPhone: '400-123-4567',
  showQRCode: true,
  showCashier: true,
  showTime: true
})

// 表单验证规则
const basicRules = {
  cashierName: [
    { required: true, message: '请输入收银台名称', trigger: 'blur' }
  ],
  cashierCode: [
    { required: true, message: '请输入收银台编号', trigger: 'blur' }
  ],
  defaultCashier: [
    { required: true, message: '请选择默认收银员', trigger: 'change' }
  ]
}

const printRules = {
  defaultPrinter: [
    { required: true, message: '请选择默认打印机', trigger: 'change' }
  ],
  companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' }
  ]
}

// 方法
const handleTabChange = (tabName) => {
  activeTab.value = tabName
}

const saveBasicSettings = async () => {
  if (!basicFormRef.value) return
  
  try {
    await basicFormRef.value.validate()
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('cashierBasicSettings', JSON.stringify(basicSettings))
    
    ElMessage.success('基本设置保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const resetBasicSettings = () => {
  Object.assign(basicSettings, {
    cashierName: '收银台001',
    cashierCode: 'C001',
    defaultCashier: '收银员001',
    location: '一楼大厅',
    productDisplayCount: 12,
    productImageSize: 'medium',
    showStock: true,
    showPrice: true
  })
  basicFormRef.value?.clearValidate()
}

const addCustomShortcut = () => {
  ElMessageBox.prompt('请输入快捷键名称', '添加自定义快捷键', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '快捷键名称不能为空'
  }).then(({ value }) => {
    customShortcuts.value.push({
      name: value,
      key: 'Ctrl+' + String.fromCharCode(65 + customShortcuts.value.length)
    })
    ElMessage.success('自定义快捷键添加成功')
  }).catch(() => {
    // 用户取消操作
  })
}

const removeShortcut = (index) => {
  customShortcuts.value.splice(index, 1)
  ElMessage.success('快捷键删除成功')
}

const resetShortcuts = () => {
  customShortcuts.value = [
    { name: '快速折扣', key: 'Ctrl+D' },
    { name: '会员查询', key: 'Ctrl+M' }
  ]
  ElMessage.success('快捷键重置成功')
}

const playSound = (type) => {
  // 模拟音效播放
  ElMessage.info(`播放${type}音效`)
}

const saveSoundSettings = async () => {
  try {
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('cashierSoundSettings', JSON.stringify(soundSettings))
    
    ElMessage.success('音效设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const resetSoundSettings = () => {
  Object.assign(soundSettings, {
    enabled: true,
    scanSuccess: true,
    scanError: true,
    paymentSuccess: true,
    addProduct: true,
    volume: 50
  })
}

const saveInterfaceSettings = async () => {
  try {
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('cashierInterfaceSettings', JSON.stringify(interfaceSettings))
    
    ElMessage.success('界面设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const resetInterfaceSettings = () => {
  Object.assign(interfaceSettings, {
    theme: 'light',
    primaryColor: '#409EFF',
    gridColumns: 4,
    cartPosition: 'right',
    showAnimations: true,
    autoFocus: true,
    fontSize: 'medium',
    fontWeight: '400'
  })
}

const previewSettings = () => {
  ElMessage.info('预览功能开发中...')
}

const savePrintSettings = async () => {
  if (!printFormRef.value) return
  
  try {
    await printFormRef.value.validate()
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('cashierPrintSettings', JSON.stringify(printSettings))
    
    ElMessage.success('打印设置保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const resetPrintSettings = () => {
  Object.assign(printSettings, {
    defaultPrinter: 'thermal',
    paperWidth: 58,
    printDensity: 5,
    companyName: '大型ERP超市',
    companyAddress: '北京市朝阳区科技园区',
    companyPhone: '400-123-4567',
    showQRCode: true,
    showCashier: true,
    showTime: true
  })
  printFormRef.value?.clearValidate()
}

const testPrint = () => {
  ElMessage.success('测试打印成功')
}

// 生命周期
onMounted(() => {
  // 从本地存储加载设置
  const savedBasic = localStorage.getItem('cashierBasicSettings')
  if (savedBasic) {
    Object.assign(basicSettings, JSON.parse(savedBasic))
  }
  
  const savedSound = localStorage.getItem('cashierSoundSettings')
  if (savedSound) {
    Object.assign(soundSettings, JSON.parse(savedSound))
  }
  
  const savedInterface = localStorage.getItem('cashierInterfaceSettings')
  if (savedInterface) {
    Object.assign(interfaceSettings, JSON.parse(savedInterface))
  }
  
  const savedPrint = localStorage.getItem('cashierPrintSettings')
  if (savedPrint) {
    Object.assign(printSettings, JSON.parse(savedPrint))
  }
})
</script>

<style scoped>
.cashier-settings-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.tab-content {
  padding: 20px 0;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.custom-shortcuts {
  margin-bottom: 20px;
}

.shortcut-item {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.shortcut-item .el-form-item {
  margin-bottom: 0;
}

.shortcut-item .el-form-item__content {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
